//菜单栏抽取

import React, { useEffect, useState } from 'react'
import { Menu } from 'antd'
import type { MenuProps } from 'antd';
// import { useLocation } from 'react-router';
import { useNavigate, useLocation } from 'react-router-dom'
import { ApartmentOutlined, DiffOutlined, AccountBookOutlined } from '@ant-design/icons';

type MenuItem = Required<MenuProps>['items'][number];

export default function MainMenu() {
    //编程式导航
    const navigate = useNavigate()
    //菜单项
    const menuItems: MenuItem[] = [
        {
            label: '数据概览',
            key: 'dataShow',
            icon: <ApartmentOutlined />,
            children: [
                {
                    label: '数据概览',
                    key: 'dataShow',
                }
            ],
        },
        {
            label: '计划管理',
            key: 'plan',
            icon: <DiffOutlined />,
            children: [
                {
                    label: '计划管理',
                    key: 'dayPlan',
                }, {
                    label: '计划分类',
                    key: 'planType',
                },
            ],
        },
        {
            label: '收支管理',
            key: 'incAndExp',
            icon: <AccountBookOutlined />,
            children: [
                {
                    label: '收支管理',
                    key: 'incAndExp',
                }, {
                    label: '收支分类',
                    key: 'incAndExpType',
                }, {
                    label: '图表',
                    key: 'incAndExpChart',
                }, {
                    label: '预算管理',
                    key: 'budget',
                },
            ],
        },
        {
            label: '账户管理',
            key: 'account',
            icon: <AccountBookOutlined />,
            children: [
                {
                    label: '账户管理',
                    key: 'account',
                }
            ],
        },
        {
            label: '用户管理',
            key: 'user',
            icon: <ApartmentOutlined />,
            children: [
                {
                    label: '角色管理',
                    key: 'role',
                },
                {
                    label: '用户管理',
                    key: 'user',
                }
            ],
        },
    ]

    // 获取路由
    const location = useLocation();
    // 解构
    const { pathname } = location
    const arr = pathname.split('/')
    //获取当前选中项
    const path = arr.filter(i => i)

    // 展开项
    let firstOpenKeys: string = ''
    // 对比路径，获取展开的key值
    menuItems.map((items: any) => {
        let i = items.key
        items.children.map((item: any) => {
            if (item.key === path[0]) {
                firstOpenKeys = i
            }
        })
    })
    const [openKeys, setOpenKeys] = useState<any[]>([firstOpenKeys]);


    // 点击菜单，跳转路由
    const clickMenu: MenuProps['onClick'] = (e) => {
        navigate('/' + e.key)
    };

    //菜单展开和回收事件
    const openChange = (keys: string[]) => {
        // console.log(keys);
        // 只展开一项
        setOpenKeys([keys[keys.length - 1]])
    }

    return (
        <div>
            <Menu
                style={{ height: '100%', borderRight: 0 }}
                theme="dark"
                defaultSelectedKeys={path}
                openKeys={openKeys}
                mode="inline"
                // 菜单项的数据
                items={menuItems}
                onClick={clickMenu}
                // 菜单展开和回收事件
                onOpenChange={openChange}
            />
        </div>
    )
}
